<template>
	<view v-if="info.imageList">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in info.imageList" :key="item">
				<view class="swiper-item">
					<image :src="item" mode="aspectFill" ></image>
				</view>
			</swiper-item>
			 
		</swiper>
		<view>{{info.name}}</view>
		<view>{{info.price}}</view>
		<!-- 加入购物按钮 -->
		<button @click="addToCart()" type="primary">加入购物车</button>
		<!-- 跳转到购物车按钮 -->
		<navigator url="../../pages/cart/cart" open-type="switchTab">
			购物车
			<text v-if="totalCount">{{totalCount}}</text>
		</navigator>
	</view>
</template>

<script setup>
	// 导入加载完毕回调函数
 import {onLoad} from '@dcloudio/uni-app'
 import {ref} from 'vue'
 // 导入接口（获取详情，检测登录，加入购物车，获取购物车数量）
 import {GetDetail,CheckLogin,AddCart,GetCount } from '../../api/index.js'
 // 购物车数量
 const totalCount = ref(0)
 // 详情信息
 const info = ref({})
 // 加载完毕，解构id
 onLoad(({id})=>{
	 GetDetail({skuId:id})
	 .then(res=>{
		 // 发送请求更新数据
		 info.value = res.data;
	 })
 })
 // 加入购物车方法
 function addToCart(){
	 // 检测是否登录
	 CheckLogin()
	 .then(res=>{
		 // 如果已经登录返回200
		 if(res.code===200){
			 // 定义加入购物车参数
			 var  obj = {"tyingSkuList":[],"mainSku":{"skuId":"","count":1}}
			 obj.mainSku.skuId=info.value.skuId;
			 // 执行加入购物车api
			 AddCart(obj)
			 .then(res=>{
				 // 获购物车数量
				 getCount();
				 // 提示加入成功
				 uni.showToast({
				 	title:"加入购物车成功"
				 })
			 })
			 
		 }else{
			 // 如果没有登录就跳转到登录页面
			 uni.navigateTo({
			 	url:"/user/Login/Login"
			 })
		 }
	 })
 }
 // 获取购物车数量
 function getCount(){
	 GetCount()
	 .then(res=>{
		 // 更新购物车数量
		 totalCount.value = res.data.totalCount;
	 })
 }
 getCount()
</script>

<style lang="scss" scoped>
.swiper{
	height: 60vh;
	image{
		width: 100%;
		height: 60vh;
	}
}
</style>
